<template>
  <div>
    <img v-if="avater" class="user" :src="avater" />
    <div v-else class="user">{{ userName | nameFormat }}</div>
  </div>
</template>

<script>
export default {
  props: {
    avater: {
      type: String,
      default: ""
    },
    userName: {
      type: String,
      default: ""
    }
  },
  filters: {
    nameFormat(str) {
      return str ? str.slice(-2) : str;
    }
  }
};
</script>

<style scoped lang="scss">
.user {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 12px;
}
div.user {
  background: #2492ff;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
</style>
